<template>
  <view :style="[{color: color, height: height}]" class="x-loading">
    <view class="_content">
      <view class="_flex">
        <view class="_pic"><x-image src="/assets/images/loading.png" /></view>
        <text class="_text">{{content}}</text>
      </view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
export default {
  name: 'XLoading',
  components: {
    XImage
  },
  props: {
    content: {
      type: String,
      default: '正在加载'
    },
    color: {
      type: String,
      default: '#1E1E1E'
    },
    height: {
      type: String,
      default: '100vh'
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {

  },
  methods: {}
};
</script>

<style lang="scss">
  .x-loading{
    text-align: center; padding: 20px 0; overflow: hidden;
    ._content{ display: inline-block; font-size: 28px;}
    ._flex{
      display: flex; align-items: center;
      ._pic{
        width: 30px; height: 30px; animation: rotate .6s steps(12) infinite; transform-origin: center center;
      }
      ._text{ padding: 0 12px;}
    }
  }
  @-webkit-keyframes rotate {
    0%{
      transform: rotate(0);
    }
    100%{
      transform: rotate(360deg);
    }
  }
</style>
